<template class="aa">
  <div class="home">
    <div class="video-background">
           <video autoplay muted src="../assets/机车.mp4"></video>
    </div>
    <div class="login">
      <div class="img">
        <img src="../../public/1.gif" alt="" srcset="" />
      </div>
      <div class="input">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" status-icon>
          <el-form-item prop="username" class="el-form-item__content">
            <span>账号：</span>
            <el-input v-model="ruleForm.username" />
          </el-form-item>
          <el-form-item prop="password" class="el-form-item__content">
            <span>密码：</span>
            <el-input type="password" v-model="ruleForm.password" />
          </el-form-item>
        </el-form>
      </div>
      <div class="button">
        <el-button type="primary" @click="Sign">登录</el-button>
        <el-button type="info" @click="chong">重置</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from '../api/login'
import { ref, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElLoading } from 'element-plus'
export default {
  setup(props) {
    const router = useRouter()
    const ruleForm = reactive({
      username: 'admin',
      password: '123456',
      loading: false,
      on: true
    })
    const rules = reactive({
      username: [
        {
          required: true,
          message: '请输入用户名',
          trigger: 'blur',
        },
        { min: 2, max: 8, message: '必须是3 到 5位' },
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur',
        },
        { min: 6, max: 10, message: '必须是6 到 10位' },
      ],
    })
    const ruleFormRef = ref({})
    //  const	timer=ref({})
    const Sign = () => {
      if (ruleForm.on) {
        ruleForm.on = false
        setTimeout(function () {
          ruleForm.on = true
          ruleFormRef.value.validate(async (valid) => {
            if (valid) {
              let res = await login(ruleForm)
              console.log(res);
              if (res.meta.status == 200) {
                sessionStorage.setItem('token', res.data.token)
                ElMessage({
                  message: res.meta.msg,
                  type: 'success',
                })
                router.push('reportsa')

              }
            }
          })
        }, 1000)

      }
    }
    const chong = () => {
      ruleForm.username = ''
      ruleForm.password = ''
    }
    return {
      ...toRefs(),
      rules,
      ruleForm,
      Sign,
      chong,
      ruleFormRef
    }
  },
}
</script>
<style lang="scss" scoped>

.home {
  width: 100%;
  height: 100%;
  // background-color: #2b4b6b;
  position: relative;
  .video-background{
    width: 100px;
    height: 100px;
  }
  .el-loading-spinner {
    /* 图片替换为你自定义的即可 */
    background: url('../../public/1.gif') no-repeat;
  }
  


  .img {
    position: absolute;
    top: -50px;
    left: 110px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #fff;
    z-index: 999;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .img:hover {
    box-shadow: 0px 0px 100px #eb7e8c;
    background: #eb7e8c;

  }

  .login {
    position: absolute;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 300px;
    background: #fff;
    background-image: url('../../public/2.gif');
    background-size: 100% 100%;
    box-sizing: border-box;

    ::v-deep .el-form-item__content {
      flex-wrap: nowrap;

      span {
        width: 50px;
      }
    }

    .input {
      width: 90% !important;
      padding-top: 120px;
      margin-left: 15px;
      margin-bottom: 30px;
      font-size: 12px;

      ::v-deep .input1 {
        width: 80%;
      }
    }

    .button {
      float: right;
      margin-right: 50px;
    }
  }
}
</style>
